import React, { Component } from 'react'
import { LeftOutlined, ShareAltOutlined, RightOutlined, CheckCircleOutlined, LikeOutlined, HeartOutlined, QuestionCircleOutlined } from '@ant-design/icons';
import { Carousel, Button, Tabs, Tooltip } from 'antd';
import detail from './detail.module.css'
import imgUrl from './images/1_03.png'
import imgUrl1 from './images/2_03.png'
import Remark from '../../components/remark/Remark'
import axios from 'axios'
import { SearchOutlined } from '@ant-design/icons';
import { Route, Link } from "react-router-dom"
import {getPhoto} from '../../api/detail'

const contentStyle = {
  height: '160px',
  color: '#fff',
  height: '8rem',
  lineHeight: '8rem',
  textAlign: 'center',
  background: 'pink',
};



const { TabPane } = Tabs;
export default class Detail extends Component {


  constructor(props) {
    super(props)
    console.log(props)
    // this.getBanner()
    // this.getPhoto()
    // this.getHave()
    // console.log(props)
    // this.getdetail()
    // this.getWant()
    // this.getbought()
    // this.userList = props.location.state.data
    // tabs:[
    //   {}
    // ]
  }

  state = {
    good:this.props.location.state,
    pid:this.props.location.state.pid,
    detailList: [],
    photoList: [],
    wantList: [],
    boughtList: []
  }
  componentDidMount() {
    // this.getBanner()
    this.getPhoto()
    // this.getHave()
    // console.log(props)
    this.getdetail()
    this.getWant()
    this.getbought()
  }
  //轮播图
  getPhoto = () => {
    let params = {pid:this.state.pid}
    axios.get("http://lmx.free.idcfengye.com/productdetail/nice/productdetail/showPhoto", { params }).then(res => {
      console.log(res, '轮播图')
      this.setState({
        photoList: res.data
      })
    })
  }


  //商品参数
  getdetail = () => {
    let params = {pid:this.state.pid}
    axios.get("http://lmx.free.idcfengye.com/productdetail/nice/productdetail/showOne", { params }).then(res => {
      console.log(res, '商品参数')
      this.setState({
        detailList: res.data,
      })
    })
  }

  //求购记录
  getWant = () => {
    let params = {pid:this.state.pid}
    axios.get("http://lmx.free.idcfengye.com/productdetail/nice/productdetail/wantshop", { params }).then(res => {
      console.log(res, '求购记录')
      this.setState({
        wantList: res.data,
      })
    })
  }

  //成交记录
  getbought = () => {
    let params = {pid:this.state.pid}
    axios.get("http://lmx.free.idcfengye.com/productdetail/nice/productdetail/bought", { params }).then(res => {
      console.log(res, '成交记录')
      this.setState({
        boughtList: res.data,
      })
    })
  }

  // goback = () => {
  //   this.state.history().goBack();
  // }
  render() {
    return (
      <div id={detail.detail}>
        <div className={detail.dHead}>
          <LeftOutlined style={{ textAlign: 'left' }} onClick={()=>{window.history.back()}}/>
          <h2>{this.state.good.pname}</h2>
          <ShareAltOutlined style={{ textAlign: 'right' }} />
        </div>
        <Carousel effect="fade" dots='true' autoplay='true' style={{ padding: '0 0.3rem' }}>
          {
            this.state.photoList.length && this.state.photoList[0].photos.map((item, i) =>
              <div key={i}>
                <h3 style={contentStyle} >
                  <img src={item.path} style={{ width: '100%', height: '8rem' }} />
                </h3>
              </div>
            )
          }
          {/* {
            this.state.photoList.length && this.state.photoList.map((item, i) =>
              <div>
                <h3 style={contentStyle} >
                  <img src={item.photos[1].path} style={{ width: '100%', height: '8rem' }} />
                </h3>
              </div>
            )
          }
          {
            this.state.photoList.length && this.state.photoList.map((item, i) =>
              <div>
                <h3 style={contentStyle} >
                  <img src={item.photos[2].path} style={{ width: '100%', height: '8rem' }} />
                </h3>
              </div>
            )
          } */}
        </Carousel>
        <div className={detail.dBtn}>
          <div className={detail.dBtn1}>
            <Link to='/Have'>
              <Button icon={<CheckCircleOutlined />}>我有</Button></Link>
            <div className={detail.dImg}>
              <Link to='/User'>
                <img src={imgUrl} />
              </Link>
              <Link to='/User'>
                <img src={imgUrl} />
              </Link>
              <Link to='/User'>
                <img src={imgUrl} />
              </Link>
              <Link to='/User'>
                <img src={imgUrl} />
              </Link>
              <Link to='/User'>
                <button>4096</button>
              </Link>
            </div>

          </div>
          <div className={detail.dBtn1}>
            
              <Button onClick={()=>{this.props.history.push('/addLike', this.state.good)}} icon={<HeartOutlined />}>想要</Button>
            <div className={detail.dImg}>
              <Link to='/User'>
                <img src={imgUrl} />
              </Link>
              <Link to='/User'>
                <img src={imgUrl} />
              </Link>
              <Link to='/User'>
                <img src={imgUrl} />
              </Link>
              <Link to='/User'>
                <img src={imgUrl} />
              </Link>
              <Link to='/User'>
                <button>4096</button>
              </Link>
            </div>
          </div>
        </div>
        <div className={detail.gry}></div>

        <div className={detail.price}>
          <p className={detail.price_t}>
            <span>最新成交价</span>
            <QuestionCircleOutlined />
          </p>
          <div className={detail.price_b}>
            <div className={detail.price_b_l}>
              <p>
                <i>￥</i><span>2005</span>
                <span>今日成交130单</span>
              </p>
              <p>
                <span>7天同比</span>
                <span>-15%</span>
              </p>
            </div>
            <div className={detail.price_b_r}>
              <p>
                <span>发售价</span>
                <span>￥1899</span>
              </p>
              <p>
                <span>商品溢价</span>
                <span>+5.6%</span>
              </p>
            </div>
          </div>
        </div>
        <div className={detail.maimai}>
          <p className={detail.tit}>
            <span>买卖详情</span>
            <span>查看全部<RightOutlined /></span>
          </p>
          <Tabs defaultActiveKey="1" centered style={{ justifyContent: 'space-around', background: '#fff' }}>
            <TabPane tab={
              <span style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center' }}>
                <i style={{ fontStyle: 'normal' }}>成交记录</i><span>6587单</span>
              </span>

            } key="1">
              {
                this.state.boughtList.map((el, i) =>
                  <p style={{ background: '#fff', display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '0  0.3rem' }}>
                    <span>5分钟前 </span>
                    <span>
                      <i style={{ fontStyle: 'normal' }}>44码</i>
                      <button style={{ background: '#333', color: '#fff', border: '0', outline: 'none', marginLeft: '0.2rem' }}>现货</button>
                    </span>
                    <span>￥1930</span>
                  </p>)
              }


              <p style={{ background: '#fff', display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '0  0.3rem' }}>
                <span>5分钟前 </span>
                <span>
                  <i style={{ fontStyle: 'normal' }}>44码</i>
                  <button style={{ background: '#333', color: '#fff', border: '0', outline: 'none', marginLeft: '0.2rem' }}>现货</button>
                </span>
                <span>￥1930</span>
              </p>
              <p style={{ background: '#fff', display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '0  0.3rem' }}>
                <span>5分钟前 </span>
                <span>
                  <i style={{ fontStyle: 'normal' }}>44码</i>
                  <button style={{ background: '#333', color: '#fff', border: '0', outline: 'none', marginLeft: '0.2rem' }}>现货</button>
                </span>
                <span>￥1930</span>
              </p>
              <p style={{ background: '#fff', display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '0  0.3rem' }}>
                <span>5分钟前 </span>
                <span>
                  <i style={{ fontStyle: 'normal' }}>44码</i>
                  <button style={{ background: '#333', color: '#fff', border: '0', outline: 'none', marginLeft: '0.2rem' }}>现货</button>
                </span>
                <span>￥1930</span>
              </p>
              <p style={{ background: '#fff', display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '0  0.3rem' }}>
                <span>5分钟前 </span>
                <span>
                  <i style={{ fontStyle: 'normal' }}>44码</i>
                  <button style={{ background: '#333', color: '#fff', border: '0', outline: 'none', marginLeft: '0.2rem' }}>现货</button>
                </span>
                <span>￥1930</span>
              </p>

            </TabPane>
            <TabPane tab={
              <span style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center' }}>
                <i style={{ fontStyle: 'normal' }}>当前求购</i><span>1249单</span>
              </span>

            } key="2">
              <p style={{ background: '#fff', display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '0  0.3rem' }}>

                <span>
                  <i style={{ fontStyle: 'normal' }}>44码</i>
                  <button style={{ background: '#333', color: '#fff', border: '0', outline: 'none', marginLeft: '0.2rem' }}>现货</button>
                </span>
                <span>￥1930</span>
                <span>1单</span>
              </p>
            </TabPane>
          </Tabs>
        </div>
        <div className={detail.gry}></div>
        <div className={detail.intro}>
          <h3>商品参数</h3>
          <p>
            <span>品牌</span>
            <span>adidas<RightOutlined style={{ color: '#000', marginLeft: '0.14rem' }} /></span>
          </p>
          <p>
            <span>发售价</span>
            <span>￥1899仅供参考</span>
          </p>
          <p>
            <span>发售时间</span>
            <span>2021年3月20日</span>
          </p>
          <p>
            <span>货号</span>
            <span>GY7658</span>
          </p>
          <p>
            <span>可用优惠</span>
            <span>满1200减40<RightOutlined style={{ color: '#000', marginLeft: '0.14rem' }} /></span>
          </p>
          <p>
            <span>支持分期</span>
            <span>花呗月供152.19元<RightOutlined style={{ color: '#000', marginLeft: '0.14rem' }} /></span>
          </p>
          <p>
            <span>请以实物为准，商品信息仅供参考</span>
            <span>商品信息有误<QuestionCircleOutlined /></span>
          </p>
        </div>
        <div className={detail.gry}></div>

        <div className={detail.gry}></div>
        <div className={detail.photo}>
          <h3>
            <span>照片(5)</span>
            <Button icon={<SearchOutlined />}>
              添加
            </Button>
          </h3>
          <div className={detail.photo_b}>
            <Link to='Dphoto'>
              <img src={imgUrl1} />
            </Link>
            <Link to='Dphoto'>
              <img src={imgUrl1} />
            </Link>
            <Link to='Dphoto'>
              <img src={imgUrl1} />
            </Link>
          </div>
          <p style={{ display: 'flex', width: '100%', justifyContent: 'space-between', alignItems: 'center', fontSize: '0.3rem', fontWeight: 'bold' }}>
            <span>查看全部在售</span>
            <RightOutlined />
          </p>
        </div>
        <div className={detail.gry}></div>
        <div className={detail.talk}>
          <h3>
            <span>讨论区(5)</span>
            <Button icon={<SearchOutlined />}>
              添加
            </Button>
          </h3>
          <Remark></Remark>
          <p style={{ display: 'flex', width: '100%', justifyContent: 'space-between', alignItems: 'center', fontSize: '0.3rem', fontWeight: 'bold' }}>
            <span>查看全部讨论</span>
            <RightOutlined />
          </p>
          {/*<div className={detail.talk_b}>
            <img src={imgUrl1} />
            <dl>
              <dt>沧海难为水哦哦哦</dt>
              <dd>
                <span>浅色系研制确实高，基本都是夏天非得，女马应涵盖根块3500</span>
                <span>
                  <LikeOutlined />
                  <i>10</i>
                </span>
              </dd>
              <dd>18小时前</dd>
              <div className={detail.talk_in}>
                <img src={imgUrl1} />
                <dl>
                  <dt>老渔夫01</dt>
                  <dd>
                    <span>肯定的</span>
                    <span>
                      <LikeOutlined />
                      <i>10</i>
                    </span>
                  </dd>
                  <dd>9小时前</dd>
                </dl>

              </div>
            <dd>3条更多回复</dd>
            </dl> */}

          {/* </div> */}
        </div>
        <div className={detail.gry}></div>
        <div className={detail.tui}>
          <h3>
            <span>推荐商品</span>
          </h3>
          <div className={detail.tui_b}>
            {/* {this.state.detailList.map((item, i) => */}
            <div className={detail.box}>
              <div className={detail.photo}>
                <img src={imgUrl1} />
              </div>
              <dl>
                <dt>ALLCITY52017年版全城5</dt>
                <dd>
                  <span>￥285</span>
                  <span>8702人付款</span>
                </dd>
              </dl>
            </div>
            {/* )} */}
          </div>
        </div>

        <div className={detail.foot}>
          
            <button onClick={()=>{this.props.history.push('/Dbuy', this.state.good)}}>
              <dl>
                <dt>最低售价</dt>
                <dd>￥1688</dd>
              </dl>
              <span>购买</span>
            </button>
          
        </div>
      </div>

    )
  }
}
